*{
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

.all{
    width: 800px;
    height: 550;
    padding: 7px 7px 7px 7px;
    border: 1px solid #ccc;
    margin: 100px auto;
    position: relative;
}

.screen{
    width: 800px;
    height: 550px;
    overflow: hidden;
    position: relative;
}

.screen li{
    width:800px;
    height: 550px;
    overflow: hidden;
    float: left;
}

.screen ul{
    position: absolute;
    left: 0;
    top: 0px;
    width: 4000px;

}

.all ol{
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 20px;
    text-align: center;
}

.all ol li{
     float: left;
     width: 20px;
     height: 20px;
     background: #fff;
     border: 1px solid #ccc;
     margin-left: 10px;
     cursor: pointer;
}

.all ol li.current{
    background-color: yellow;

}

#arr{
  display: none;
}

#arr span{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -20px;
    background: #000;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: 400;
    font-size: 30px;
    color: red;
    opacity: 0.3;
    border: 1px solid #fff;
}
#arr #right{
    right: 5px;
    left: auto;
}
ul li{
    list-style: none;
}
ul a{
    text-decoration: none;
    color: #000;
}
ul li{
    float: right;
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: #bcecdd;
    font-weight: 900;
}
ul li ul li{
    display: none;
}
ul li:hover ul li{
    display: block;
}
ul li:hover {
    background-color: springgreen;
}
#a{
    width: 100%;
    height: 36px;
    position: relative;
    top: 0px;
    background-color: #bcecdd;
}
#c{
    float: left;
    font-weight: 900;
}
#f>img{
    float: right;
    position: relative;
    top: -660px;
}
#e>img{
    float: left;
    position: relative;
    top: -660px;
}
header>h1{
    position: absolute;
   right: 37%;
   top: 65px;
}
#main{
    margin: 60px auto;
    width: 100%;
    height: auto;
}
#main>h1{
    text-align: center;
}
#g{
    height: 880px;
    border: 2px solid;
    box-sizing: border-box;
    background-color: #ccc;
}
#y{
    float: left;
    margin: 20px;
    background-image: url("10.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 350px;
    height: 400px;
    overflow: hidden;
}
#y>div{
    position: absolute;
    width: 350px;
    height: 400px;
    top: 100%;
    transition: transform 1.5s;
    box-sizing: border-box;
    padding: 30px;
}
#y:hover div{
    transform: translateY(-100%);
    background-color: #000;
    opacity: 0.7;
    padding: 30px;
}
#n{
    float: right;
    margin: 20px;
    background-image: url("9.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 350px;
    height: 400px;
    overflow: hidden;
}
#n>div{
    position: absolute;
    width: 350px;
    height: 400px;
    top: 100%;
    transition: transform 1.5s;
    box-sizing: border-box;
    padding: 30px;
}
#n:hover div{
    transform: translateY(-100%);
    background-color: #000;
    opacity: 0.7;
    padding: 30px;
}
#s{
    float: left;
    margin: 20px;
    background-image: url("8.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 350px;
    height: 400px;
    overflow: hidden;
}
#s>div{
    position: absolute;
    width: 350px;
    height: 400px;
    top: 100%;
    transition: transform 1.5s;
    box-sizing: border-box;
    padding: 30px;
}
#s:hover div{
    transform: translateY(-100%);
    background-color: #000;
    opacity: 0.7;
    padding: 30px;
}
#k{
    float: right;
    margin: 20px;
    background-image: url("11.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 350px;
    height: 400px;
    overflow: hidden;
}
#k>div{
    position: absolute;
    width: 350px;
    height: 400px;
    top: 100%;
    transition: transform 1.5s;
    box-sizing: border-box;
    padding: 30px;
}
#k:hover div{
    transform: translateY(-100%);
    background-color: #000;
    opacity: 0.7;
    padding: 30px;
}
